<template>
	<view class="container">
		<header-view type="second" leftShow rightShow>{{$t('财务账户')}}</header-view>
		<view class="content">
			<view class="list" v-if="list.length!=0">
				<view class="item" v-for="item in list">
					<view class="top flex_between">
						<text>{{item.address}}</text>
						<u-icon name="trash" color="#d5dde9" size="22" @tap="removeCard(item)"></u-icon>
					</view>
					<view class="number flex_center">{{item.bankcardno}}</view>
					<view class="name">{{item.bank}}</view>
				</view>
			</view>
			<view class="no_data" v-else>
				<view class="no_data_detail flex_center">{{$t('暂未绑定银行卡')}}</view>
			</view>
			<u-button class="submit" :text="$t('添加银行卡')" @tap="add"></u-button>
		</view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView/index.vue"
	import {
		walletListApi,
		walletDelApi
	} from "@/api/api.js"
	export default {
		components: {
			headerView
		},
		data() {
			return {
				list: []
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				walletListApi().then(res => {
					console.log(res.data.data)
					this.list = res.data.data
				})
			},
			removeCard(opt) {
				console.log(opt)
				walletDelApi({
					id: opt.id
				}).then(res => {
					uni.$u.toast(res.data.msg)
					this.getList()
				})
			},
			add() {
				uni.navigateTo({
					url: "/pages/bankCard/add"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {

		.content {
			padding: 0 24rpx;

			.list {
				.item {
					background: url(../../static/img/card_bg.png) no-repeat center / 100%;
					height: 350rpx;
					margin: 0 0 24rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #fff;
					padding: 0 30rpx;

					.top {
						height: 130rpx;
					}

					.number {
						height: 80rpx;
					}

					.name {
						height: 140rpx;
						line-height: 140rpx;
					}
				}
			}

			.no_data {
				.no_data_detail {
					height: 560rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #999;
				}
			}

			.submit {
				height: 88rpx;
				background: #4c3d89;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #fff;
				margin-top: 66rpx;
				border: none;
			}
		}
	}
</style>